<template>
  <el-dialog :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    title="添加题目至试卷"
    class="add-answer-dialog"
    width="800px"
  >
    <div class="subject-list">
      <vuedraggable
        v-model="list"
        :options="{
          animation: 300,
          chosenClass: 'chosen'
        }"
        group="subject"
        @update="handleChange"
      >
        <transition-group>
          <div
            v-for="item in list"
            :key="item.id"
            class="subject-list-item"
          >
            <span class="name">{{ item.topic }}</span>
            <i class="el-icon-s-operation icon" />
          </div>
        </transition-group>
      </vuedraggable>
    </div>
  </el-dialog>
</template>

<script>
import vuedraggable from 'vuedraggable'
export default {
  name: 'AddAnswerToPaper',
  components: {
    vuedraggable
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    paperId: {
      type: Number,
      default: null
    },
    subjectList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      list: []
    }
  },
  watch: {
    show(n, o) {
      this.dialogVisible = n
    },
    dialogVisible: {
      immediate: true,
      handler: function(n, o) {
        this.$emit('update:show', n)
      }
    },
    subjectList() {
      this.list = this.subjectList.map((item, index) => {
        return {
          ...item,
          order: index + 1
        }
      })
    }
  },
  methods: {
    handleChange(e) {
      console.log('e handleChange------>', e)
      const { newIndex } = e
      this.list[newIndex].order = newIndex + 1
    }
  }
}
</script>

<style scoped lang='scss'>
.add-answer-dialog {
  // overflow-y: auto;
  .subject-list {
    height: 300px;
    overflow-y: auto;
    &-item {
      padding: 20px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      justify-content: space-between;
      .name {
        color: #409eff;
      }
      .icon {
        font-size: 18px;
      }
    }
  }
  .chosen {
    color: #000;
    border: #409eff 1px solid;
  }
}
</style>
